<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="box">我是id为box的div</div>

    <p class="p1">1</p>
    <p class="p1">2</p>
    <p class="p1">3</p>

    <span>2</span>
    <span>2</span>
    <span>2</span>

    <input type="checkbox" name="hobby">篮球
    <input type="checkbox" name="hobby">足球
    <input type="checkbox" name="hobby">乒乓球

</body>

</html>

<script>
    /*
     DOM 文档对象模型
     理解：
     js将html文档各个部分分开封装为一个一个的对象
     在这些对象中有一种类似于倒挂的数的模型我们称为DOM树 那么每个小的部分我们称为节点
     对于这个html文档：
     我们一般将所有节点封装为对象：
     Document 整个文档对象
     Element  元素对象  标签
     Attribute 属性对象
     Text   文本对象
     Comment  注释对象
 
     通过以上对象 我们可以对html进行：
     改变文本内容 元素内容   样式  对标签控制事件  对html中的各个部分进行添加 删除  修改操作

     Dom的分类：
     核心DOM:CoreDom 针对任何使用类似于html结构话的语言通用的方法和标准
     XMLDOM:针对xml文档的方法
     HTMLDOM：针对html文档的方法
     CSSDOM:针对CSS样式的方法
    */


    //获取元素(Element)对象：
    //1.根据元素的id值来获取一个元素的对象   => 一个对象
    var div = document.getElementById("box");
    //alert(div);

    //有了对象以后我们可以操作属性或者方法 后面讲

    //2.根据元素的class值获取元素  => 元素的数组
    var p1s = document.getElementsByClassName("p1");
    // alert(p1s);

    //3.根据标签的名称获取元素 => 元素的数组
    var spans = document.getElementsByTagName("span");
    // alert(spans);

    //4.根据name属性获取标签  => 元素的数组
    var hobbys = document.getElementsByName("hobby");
    alert(hobbys);





</script>